<template>
	<view class="content">
		<view class="">要求页面最小宽度 375px， 且页面宽度最大 500px，是否匹配: {{ matches }}</view>
		<view>要求屏幕方向为纵向，是否匹配: {{ landscape }}</view>
		<button type="default" @click="goback">返回上一页</button>
	</view>
</template>

<script>
let landscapeOb;
export default {
	data() {
		return {
			matches: false,
			landscape: false,
			mediaQueryOb: null
		};
	},
	onLoad() {},

	// 和 UI 相关的 api 在组件 mountd 后执行
	mounted() {
		this.testMediaQueryObserver();
		this.landscapeObserver();
	},

	methods: {
		testMediaQueryObserver() {
			this.mediaQueryOb = uni.createMediaQueryObserver(this);

			this.mediaQueryOb.observe(
				{
					minWidth: 375, //页面最小宽度 375px
					maxWidth: 500 //页面宽度最大 500px
				},
				matches => {
					this.matches = matches;
				}
			);
		},
		landscapeObserver() {
			landscapeOb = uni.createMediaQueryObserver(this);
			landscapeOb.observe(
				{
					orientation: 'landscape' //屏幕方向为纵向
				},
				matches => {
					this.landscape = matches;
				}
			);
		},
		goback() {
			uni.navigateBack({
				delta: 1
			});
		}
	},
	destroyed() {
		console.log('组件销毁时，停止监听');
		this.mediaQueryOb.disconnect(); //组件销毁时停止监听
		landscapeOb.disconnect();
	}
};
</script>

<style>
.content {
	text-align: center;
	height: 400upx;
}
</style>
